<template>
  <div class="chat" :class="[isMy ? 'self' : 'chatgpt']">
    <div class="avatar">
      <span class="icon-box" v-if="!isMy">
        <img src="@/assets/images/xiaoxi-active.svg" alt="">
      </span>
      <span class="my-avator" v-else>
        <img src="@/assets/images/my-avator.png" alt="">
      </span>
    </div>
    <div class="content">
      <div class="msgArea">
        <chatText :text="text" :isMy="isMy"></chatText>
      </div>
      <p class="date">{{ dateTime }}</p>
    </div>
  </div>

</template>
<script setup>
import chatText from "./chatText.vue"
const props = defineProps(['dateTime', 'text', 'isMy']);


</script>
<style scoped lang="less">
.chat{
  display: flex;
  margin-bottom: 20px;
  .icon-box{
    display: inline-block;
    width: 42px;
    height: 42px;
    background: #EBF5FC;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    >img{
      width: 20px;
      height: 20px;
      line-height: 42px;
    }
  }

  .my-avator{
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    >img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &.self {
    flex-direction: row-reverse;
    .avatar {
      margin-right: 0;
      margin-left: 10px;
    }
    .msgArea {
      flex-direction: row-reverse;
    }
  }

  .avatar{
    flex: none;
    margin-right: 10px;
  }

  .content{
    .date {
      font-size: 13px;
      color: #9AA1B2;
      margin: 9px 10px;
    }
    .msgArea {
      display: flex;
    }
  }

}

</style>